import React, { useEffect, useState } from 'react';
import { Dropdown, Menu } from 'antd';

import { obtainDictMap } from '@/pages/SalaryManage/utils';

import styles from './index.less';

const SALARY_OBJECT_OPTIONS = 'salaryObjectOptions';
const DICT_NAME_LIST = [SALARY_OBJECT_OPTIONS];

const ItemDropDown = ({ item, children }) => {
    const [salaryObjectEnum, setSalaryObjectEnum] = useState({});

    useEffect(() => {
        obtainDictMap(DICT_NAME_LIST).then(enumMap => {
            setSalaryObjectEnum(enumMap[SALARY_OBJECT_OPTIONS]);
        });
    }, []);

    return (
        <Dropdown
            trigger={['hover']}
            getPopupContainer={triggerNode => triggerNode.parentNode}
            overlay={() => (
                <Menu className={styles.dropdownBox}>
                    <Menu.Item className={styles.dropdownItem}>
                        <span className={styles.dropdownLabel}>全称：</span>
                        <span>
                            {item.parentTitle}
                            {item.title}
                        </span>
                    </Menu.Item>
                    <Menu.Item className={styles.dropdownItem}>
                        <span className={styles.dropdownLabel}>
                            {(item.formulaFlow && '审批流：') ||
                                (item.formulaFunc && '公式：') ||
                                (item.staffInfoName && '取值关联字段：')}
                        </span>
                        <span>{item.formulaFlow || item.formulaFunc || item.staffInfoName}</span>
                    </Menu.Item>
                    <Menu.Item className={styles.dropdownItem}>
                        <span className={styles.dropdownLabel}>对象：</span>
                        <span>{salaryObjectEnum[item.salaryObject]}</span>
                    </Menu.Item>
                </Menu>
            )}
            placement="topCenter"
            mouseEnterDelay={0.3}
        >
            {children}
        </Dropdown>
    );
};

export default ItemDropDown;
